<template>
  <view>
    <!-- 货源详情内容 -->
    <view class="content">
      <view class="title">
        <text>货源详情</text>
      </view>
      <view class="detail">
        <view class="item">
          <text>发货地址</text>
          <text>{{ goodsDetails.shipping_station_name + "--" + goodsDetails.shipping_station_address }}</text>
        </view>
        <view class="item">
          <text>收货地址</text>
          <text>{{ goodsDetails.unloading_station_name + "--" + goodsDetails.unloading_station_address }}</text>
        </view>
        <view class="item">
          <text>装货数量</text>
          <text>{{ goodsDetails.sum }}</text>
        </view>
        <view class="item">
          <text>实际拉货数量</text>
          <text>{{ goodsDetails.actualSum }}</text>
        </view>
        <view class="item">
          <text>实际运送到数量</text>
          <text>{{ goodsDetails.unloadSum }}</text>
        </view>
        <view class="item">
          <text>订单状态</text>
          <text>{{ getOrderStatus(goodsDetails.status) }}</text>
        </view>
        <view class="item">
          <text>运价</text>
          <text>{{ goodsDetails.unitprice }}/吨</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  onLoad,
  onShow
} from '@dcloudio/uni-app';
import {
  ref,
  onMounted
} from 'vue';
// 引入存放用户信息的容器
import {
  userStore
} from '@/stores/user';
// 引入拦截器
import '@/config/requst.js';
import {
  http
} from '@/config/requst.js';

const u = userStore();
// 封装所有属性到一个对象
const goodsDetails = ref({});

const getOrderStatus = (status) => {
  switch (status) {
    case 0:
      return '接单';
    case 1:
      return '已打卡';
    case 2:
      return '待装货';
    case 3:
      return '已装货';
    case 3:
      return '已卸货';
    default:
      return '订单已取消';
  }
};

const getGoodsDetails = async () => {
  //查询货源详情
  const res = await http({
    url: '/orders/selectOrder/' + goodsDetails.value.id,
  })
  console.log(res)
  goodsDetails.value = res.shuju;
};

// onMounted(() => {
// 	// 调用查询方法
// 	getGoodsDetails();
// });
//  页面加载时执行查询
onLoad((obj) => {
  //从容器中获取该用户的id
  goodsDetails.value.id = userStore().user.id;
  getGoodsDetails();
})
</script>

<style lang="scss" scoped>
// 货源详情内容样式
.content {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.detail {
  .item {
    display: flex;
    justify-content: space-between;
    padding: 15rpx 0;
    border-bottom: 1rpx solid #eee;

    text {
      font-size: 28rpx;
    }

    image {
      max-width: 200rpx;
      max-height: 200rpx;
    }
  }
}
</style>